<template>
  <view class="topup-container">
    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 余额提示（可选） -->
        <view class="notice">
          <uv-icon name="info-circle" size="18" color="#36cfc9" />
          <text class="notice-text">最低充值金额为 1000 元</text>
        </view>

        <!-- 金额输入卡片 -->
        <view class="card">
          <view class="card-title">充值金额</view>
          <view class="amount-row">
            <text class="currency">¥</text>
            <uv-input
              v-model="amount"
              type="digit"
              placeholder="请输入金额"
              :border="false"
              :clearable="true"
              input-align="left"
              :custom-style="inputStyle"
            />
          </view>
        
        </view>

        <!-- 支付方式 -->
        <view class="card">
          <view class="card-title">支付方式</view>
          <uv-radio-group v-model="payMethod" placement="column">
            <view class="pay-item" @click="payMethod = 'wechat'">
              <view class="pay-left">
                <uv-icon name="weixin-circle-fill" :color="'#FF6B35'" :size="22" />
                <text class="pay-name">微信支付</text>
              </view>
              <uv-radio name="wechat" :activeColor="themeColor" />
            </view>
            <view class="divider"></view>
            <view class="pay-item" @click="payMethod = 'alipay'">
              <view class="pay-left">
                <uv-icon name="zhifubao-circle-fill" :color="'#FF6B35'" :size="22" />
                <text class="pay-name">支付宝支付</text>
              </view>
              <uv-radio name="alipay" :activeColor="themeColor" />
            </view>
          </uv-radio-group>
        </view>

        <!-- 协议勾选（可选） -->
        <view class="agree-row">
          <uv-checkbox v-model="agree" :activeColor="themeColor" />
          <text class="agree-text">我已阅读并同意</text>
          <text class="agree-link" @click="openProtocol">《充值服务协议》</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部提交按钮 -->
    <view class="bottom-action">
      <uv-button
      type="primary"
        text="立即充值"
        size="large"
        :custom-style="buttonStyle"
        @click="submitTopup"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRequest } from '@/api'
const { GET_LIST_REACHARGE } = useRequest()
import { UserInfoManager } from '@/utils/userInfo'
const themeColor = '#FF6B35'
const amount = ref('')

const payMethod = ref<'wechat' | 'alipay' | 'bank'>('wechat')
const agree = ref(true)

const inputStyle = {
  backgroundColor: '#ffffff',
  padding: '0',
  fontSize: '48rpx',
  color: '#1f1f1f',
  fontWeight: '700'
}

const buttonStyle = {
  backgroundColor: themeColor,
  borderColor: themeColor,
  height: '96rpx',
  borderRadius: '48rpx',
  fontSize: '32rpx',
  fontWeight: '600'
}


const openProtocol = () => {
  uni.navigateTo({
    url:'/user/mine/chongzhi'
  })
}

// 获取支付方式对应的mode值
const getPaymentMode = (method: string) => {
  const modeMap: { [key: string]: string } = {
    'wechat': 'wxpay',
    'alipay': 'alipay'
  }
  return modeMap[method] || 'wxpay'
}

const submitTopup = async () => {
  const val = Number(amount.value)
  if (!val) {
    uni.showToast({ title: '请输入充值金额', icon: 'none' })
    return
  }
  if (val < 1000) {
    uni.showToast({ title: '最低充值 1000 元', icon: 'none' })
    return
  }
  if (!agree.value) {
    uni.showToast({ title: '请先同意协议', icon: 'none' })
    return
  }
  const params ={
    isdriver: UserInfoManager.lastrole(),
    money:val,
    mode: getPaymentMode(payMethod.value)
  }
 const res = await GET_LIST_REACHARGE(params)
 if(res.code ===1){
  uni.navigateBack()
 }
}
</script>

<style lang="scss" scoped>
.topup-container {
  min-height: 100vh;
  background: #f6f7f9;
  position: relative;
}

.scroll-view { flex: 1; }
.content-area { padding: 24rpx; }

.notice {
  display: flex;
  align-items: center;
  gap: 12rpx;
  background: #e6fffb;
  border: 1rpx solid #b5f5ec;
  color: #08979c;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.notice-text{ font-size: 26rpx; }

.card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,.04);
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.card-title { font-size: 30rpx; color: #333; font-weight: 600; margin-bottom: 16rpx; }

.amount-row {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}
.currency { font-size: 40rpx; color: #1f1f1f; font-weight: 700; }

.quick-amounts{
  display:flex; flex-wrap: wrap; gap: 16rpx; margin-top: 20rpx;
}
.quick-chip{
  padding: 12rpx 22rpx; border-radius: 28rpx; background:#f5f5f5; color:#666; font-size: 26rpx;
}
.quick-chip.active{ background:#fff0e6; color:#FF6B35; border:1rpx solid #FF6B35; }

.pay-item{ display:flex; align-items:center; justify-content: space-between; padding: 22rpx 0; }
.pay-left{ display:flex; align-items:center; gap: 12rpx; }
.pay-name{ font-size: 28rpx; color:#333; }
.divider{ height:1rpx; background:#f0f0f0; }

.agree-row{ display:flex; align-items:center; gap: 8rpx; padding: 8rpx 4rpx; color:#666; }
.agree-text{ font-size: 26rpx; }
.agree-link{ font-size: 26rpx; color:#FF6B35; }

.bottom-action{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32rpx;
    background: #fff;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

:deep(.uv-input__input){ font-size: 48rpx !important; font-weight: 700 !important; color:#1f1f1f !important; }
:deep(.uv-input__placeholder){ color:#bfbfbf !important; font-size: 36rpx !important; }
</style>
